<template>
  <div class="scroll-indicator" v-if="showIndicator">
    <div class="scroll-arrow" @click="scrollToBottom">
      <div class="arrow-icon">↓</div>
      <div class="arrow-text">向下滚动查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollIndicator',
  data() {
    return {
      showIndicator: false,
      scrollTimer: null
    }
  },
  mounted() {
    this.checkScrollPosition()
    this.bindScrollEvent()
  },
  beforeDestroy() {
    this.unbindScrollEvent()
    if (this.scrollTimer) {
      clearTimeout(this.scrollTimer)
    }
  },
  methods: {
    checkScrollPosition() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const windowHeight = window.innerHeight
      const documentHeight = document.documentElement.scrollHeight
      
      // 如果页面可以滚动且用户还没有滚动到底部，显示指示器
      this.showIndicator = documentHeight > windowHeight && scrollTop < documentHeight - windowHeight - 100
    },
    bindScrollEvent() {
      window.addEventListener('scroll', this.handleScroll)
    },
    unbindScrollEvent() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    handleScroll() {
      // 防抖处理
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer)
      }
      this.scrollTimer = setTimeout(() => {
        this.checkScrollPosition()
      }, 100)
    },
    scrollToBottom() {
      window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.scroll-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  animation: bounce 2s infinite;
}

.scroll-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.5);
  border-radius: 25px;
  transition: all 0.3s ease;
}

.scroll-arrow:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: #00d4ff;
  transform: translateY(-2px);
}

.arrow-icon {
  font-size: 24px;
  color: #00d4ff;
  margin-bottom: 5px;
}

.arrow-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 20px;
  }
  
  .scroll-arrow {
    padding: 8px 15px;
  }
  
  .arrow-icon {
    font-size: 20px;
  }
  
  .arrow-text {
    font-size: 10px;
  }
}
</style>
